<template>
	<view class="custom-order" @click="customDetails(message)">
		<view class="custom-order-top ss-flex">
			<view>{{message.payload.custom.platform}}</view>
		</view>
		<view class="custom-order-status ss-p-x-34 ss-m-t-6">
			{{message.payload.custom.order_status_title}}
		</view>
		<view class="custom-order-time ss-p-x-34">{{message.payload.custom.order_status_time}}</view>
		<view class="custom-order-goods ss-flex ss-p-x-34 ss-m-t-10">
			<image class="custom-order-goods-image"
				:src="cdn(message.payload.custom.img_url)" mode="aspectFill"></image>
			<view class="custom-order-goods-text ss-flex flex-column align-start justify-start">
				<view class="custom-order-goods-text-title ss-line-1">
					{{message.payload.custom.order_goods_title}}
				</view>
				<view class="custom-order-goods-text-tips ss-m-t-14 ss-line-2">
					{{message.payload.custom.order_status_msg}}
				</view>
			</view>
		</view>
		<view class="custom-order-bottom ss-m-t-14 ss-flex justify-between align-center ss-p-x-28">
			<view class="custom-details-left">查看详情</view>
			<uni-icons type="right" size="18" color="#A6A6A6"></uni-icons>
		</view>
	</view>
</template>

<script setup>
		import {cdn,udid} from '@/im/config/index.js'
	const props = defineProps({
		message: {
			type: Object,
			default: {}
		}
	})
	
	const customDetails = (msg) => {
		if (udid === msg.payload.custom.tag) {
			uni.navigateTo({
				url: msg.payload.custom.link_url
			})
		} else {
			uni.showToast({
				title: '请前往指定平台查看详情!',
				icon: 'none',
				duration: 2000
			});
		}
	}
</script>

<style lang="scss" scoped>
	view  {
		box-sizing: border-box;
	}
	
	.custom-order {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
	
		.custom-order-top {
			height: 84rpx;
			padding: 0 28rpx;
			border-bottom: 1rpx solid #F5F5F5;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
	
			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 28rpx;
			}
		}
	
		.custom-order-status {
			font-weight: 700;
			font-size: 28rpx;
			color: #3D3D3D;
		}
	
		.custom-order-time {
			font-weight: 400;
			font-size: 24rpx;
			color: #B1B1B1;
		}
	
		.custom-order-goods {
			.custom-order-goods-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 5rpx;
				margin-right: 32rpx;
			}
	
			.custom-order-goods-text {
				height: 120rpx;
				flex: 1;
	
				.custom-order-goods-text-title {
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
				}
	
				.custom-order-goods-text-tips {
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
					line-height: 34rpx;
				}
			}
		}
	
		.custom-order-bottom {
			height: 84rpx;
			border-top: 1rpx solid #F5F5F5;
	
			.custom-details-left {
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}
	}
</style>